<template>
	<view class="pwd-retrieve-container">
		<uni-forms ref="formRef" :model="user" :rules="rules" labelWidth="80px">
			<uni-forms-item name="oldPassword" label="旧密码">
				<uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
			</uni-forms-item>
			<uni-forms-item name="newPassword" label="新密码">
				<uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" />
			</uni-forms-item>
			<uni-forms-item name="confirmPassword" label="确认密码">
				<uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
			</uni-forms-item>
			<button type="primary" @click="submit">提交</button>
		</uni-forms>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { updateUserPassword } from "@/api/system/user/profile";

	const formRef = ref();
	const user = ref({
		oldPassword: "",
		newPassword: "",
		confirmPassword: "",
	});

	const rules = ref({
		oldPassword: {
			rules: [{
				required: true,
				errorMessage: "旧密码不能为空",
			}],
		},
		newPassword: {
			rules: [
				{
					required: true,
					errorMessage: "新密码不能为空",
				},
				{
					minLength: 6,
					maxLength: 20,
					errorMessage: "长度在 6 到 20 个字符",
				},
			],
		},
		confirmPassword: {
			rules: [
				{
					required: true,
					errorMessage: "确认密码不能为空",
				},
				{
					validateFunction: (rule : any, value : string, data : any) => data.newPassword === value,
					errorMessage: "两次输入的密码不一致",
				},
			],
		},
	});

	const submit = async () => {
		if (!formRef.value) return;
		const { valid } = await formRef.value.validate();
		if (valid) {
			await updateUserPassword(user.value.oldPassword, user.value.newPassword);
			uni.showToast({ title: "修改成功", icon: "success" });
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.pwd-retrieve-container {
		padding-top: 36rpx;
		padding: 15px;
	}
</style>